<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //文档碎片在理论上可以提高DOM操作的执行效率，将要追加的dom操作先放置在文档碎片中，最后在追加给对应的元素

    //1.创建10000个li
    // for (var i = 1; i <= 10000; i++) {
    //     var cLi = document.createElement('li');
    //     cLi.innerHTML = i;
    //     document.body.appendChild(cLi);
    // }
    //上面的弊端：创建10000次，追加了10000次。

    //将要追加的dom操作先放置在文档碎片中，最后在追加给对应的元素
    // var fragment = document.createDocumentFragment(); //创建文档碎片。
    // for (var i = 1; i <= 10000; i++) {
    //     var cLi = document.createElement('li');
    //     cLi.innerHTML = i;
    //     fragment.appendChild(cLi); //追加给文档碎片
    // }
    // document.body.appendChild(fragment); //追加了1次
</script>